<template>
    <div style="background-color:#ff5454 ;">
        <van-icon name="wap-nav" @click="onClick" style="float: left; color: aliceblue; margin-top: 18px;padding-left: 3px;" size="20"/>
        <van-search v-model="searchData" shape="round" background="#ff5454" placeholder="请输入搜索关键词" />
    </div>
    
    
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in productData" :key="image">
        <img :src="image.img" style="width: 100%;   height: 300px;"/>
      </van-swipe-item>
    </van-swipe>
        <van-notice-bar scrollable text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />

    <div class="header">
        <div class="nav">
            <van-grid square :column-num="5" icon-size="40px">
                <van-grid-item v-for="item in categoryData" :key="item.title" :icon="item.img" :text="item.title" />
            </van-grid>
        </div>
    </div>
    <div class="ms">
        <!-- 设置垂直间距 -->
        <van-row :gutter="[20, 20]">
            <van-col span="6">
                <p>华杉秒杀<br>
                    现时低价<br>
                </p>
                <p style="background-color: aliceblue; color: red; width: 70px;border-radius: 5px;">去抢购<van-icon
                        name="fire-o" color="#ee0a24" /></p>
            </van-col>
            <van-col span="18" style="margin-top: 3px; margin-bottom: 3px;">
                <!-- <van-image
      width="100"
      height="100"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    /> -->
                <van-grid class="call" icon-size="40px" :border="false" style="height: 80px;">
                    <van-grid-item
                        icon="https://m.360buyimg.com/seckillcms/jfs/t1/187073/22/34951/86481/645e26a4Fb44397e2/7abdfeeb80c98d66.jpg"
                        text="18.8" />
                    <van-grid-item
                        icon="http://m.360buyimg.com/seckillcms/jfs/t1/224673/5/10020/80285/65853646F3a495878/ce15adb29c760e5a.jpg"
                        text="20.8" />
                    <van-grid-item
                        icon="http://m.360buyimg.com/seckillcms/jfs/t1/224673/5/10020/80285/65853646F3a495878/ce15adb29c760e5a.jpg"
                        text="8.8" />
                    <van-grid-item
                        icon="http://m.360buyimg.com/seckillcms/jfs/t1/235394/19/14711/73053/660df6daF61cb6a24/b2890f6f7a0b40eb.jpg"
                        text="6.8" />
                </van-grid>
            </van-col>
        </van-row>
    </div>
    <!--商品展示-->
    <van-grid :column-num="2" icon-size="100px" style="margin-bottom: 40px;">
        <van-grid-item v-for="item in productData" :to="{name:'movedetails',query:{categoryId:item.id}}">
            <van-image width="100%" height="100%" :src="item.img.split(',')[0]" />
            <span>{{ item.name }}</span>
            <img class="sptl" src="https://img12.360buyimg.com/img/s264x76_jfs/t1/47319/8/18410/7823/642bfbcaFb2428c1a/0ec6a2d6acc3f824.png" alt="" >
            <span style="color:red; font-size: 19px; font-weight: 700;">￥{{ item.price }}</span>
        </van-grid-item>
    </van-grid>

    <van-back-top />

    <!-- <van-search
      v-model="searchData"
      show-action
        background="#ff5454"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onClickButton">登录</div>
      </template>
    </van-search> -->
    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o">类目</van-tabbar-item>
        <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" :to="{name:'home'}">个人中心</van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { productApi } from '@/api';
import { useRouter } from 'vue-router';
const router=useRouter()
const active = ref(0);
const searchData = ref('')
// const images = [
//     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
//     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
// ];

const categoryData = ref([
    { title: '华杉超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
    { title: '华杉电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png' },
    { title: '美肤美妆', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png' },
    { title: '充值中心', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png' },
    { title: '个人会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png' },
    { title: '生鲜超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png' },

])
const productData = ref([])

onMounted(() => {
    callProductlist()
})
const callProductlist = () => {
    productApi.select.call().then((res: any) => {
        console.log(res);
        productData.value = res
    })
}
const onClick = () => { 
    router.push({name:"movedetails"})
}


// const onSearch = (val: any) => {console.log(val);};
// const onClickButton = () => {console.log("点击了操作");};
</script>
<style scoped>
.header {
    width: 100%;
    height: 200px;
    background-color: rgb(253, 245, 251);
}

.nav {
    width: 96%;
    height: 180px;
    background-color: rgb(250, 252, 253);
    border-radius: 8px;
    margin-left: 9px;

}
.sptl{
    width: 60px;
}
.ms {
    /* margin-top: 66px; */
    height: 100px;
    background-color: #ff4226;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 8px;
}

p {
    color: aliceblue;
    font-size: 16px;
    font-weight: 700;
}

.call .van-grid-item{
    height: 95px;
   padding-right: 2px;
    border-radius: 6px;
}
</style>
<style>

.call .van-grid-item__text {
    color: red !important;
    font-weight: 700 !important;
    font-size: 16px;
}


</style>
